<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
			div{
				position: absolute;
				top:0;
				left: 0;
				width: 100px;
				height: 100px;
				background: aqua;
			}
			p{
				width:99px;
				height:99px;
				position: absolute;
				top:0;
				left: 0;
				width: 100px;
				height: 100px;
				border: 1px dashed blue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			class Tuo{
				constructor(){
					this.oDiv=document.getElementsByTagName("div")[0];
					var x=0;
					var y=0;
				}
				Btn(){
					var _this = this;
					_this.oDiv.onmousedown = function(ev) {
						var p=document.createElement("p");
							p.style.left=_this.x+"px";
						    p.style.top=_this.y+"px";	
						    document.body.appendChild(p);
						var ev = ev || event;
						_this.ol = ev.clientX - _this.oDiv.offsetLeft;
						_this.ot = ev.clientY - _this.oDiv.offsetTop;
						document.onmousemove = function(ev) {
							var ev = ev || event;
							_this.x = ev.clientX - _this.ol;
							_this.y = ev.clientY - _this.ot;
							p.style.left = _this.x + "px";
							p.style.top = _this.y + "px";
						}
						document.onmouseup = function() {
							_this.oDiv.style.left=_this.x+"px";
				            _this.oDiv.style.top=_this.y+"px";
							document.onmousemove = null;
							document.onmouseup = null;
							document.body.removeChild(p);
						}
						return false;
					}
				}
			  }
			window.onload = function() {
				var Obj = new Tuo();
				Obj.Btn();
			}
			
		</script>
		
		
	</body>
</html>
